<html>
  <head>
    <title>Straight JavaScript with XHR Drop and Drop File Uploading ( Same Domain )</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <script>
      function init() {
        var dropbox;
        dropbox = document.getElementById( 'dropbox' );

        function handleFiles( files ) {
          for ( var f = 0; f < files.length; f++ ) {
            var xhr = new XMLHttpRequest();
            xhr.open( 'POST', 'http://bis.silverbiology.com/dev/resources/api/api.php', true );
            xhr.onreadystatechange = function() {
              if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                  console.log( 'success', xhr.responseText );
                } else {
                  console.log( 'error', xhr, xhr.status );
                }
              }
            }
            xhr.onerror = function () {
              console.log( 'error', xhr, xhr.status );
            }
            xhr.upload.onprogress = function( e ) {
              if ( e.lengthComputable ) {
                console.log( 'progress update:', ( e.loaded / e.total ) * 100 );
              }
            }
            xhr.send( 'cmd=imageAddFromForm' + files[ f ] );
          }
        }

        function dragenter( e ) {
          e.stopPropagation();
          e.preventDefault();
        }

        function dragover( e ) {
          e.stopPropagation();
          e.preventDefault();
        }

        function drop( e ) {
          e.stopPropagation();
          e.preventDefault();

          var dt = e.dataTransfer;
          var files = dt.files;

          handleFiles( files );
        }

        dropbox.addEventListener( 'dragenter', dragenter, false );
        dropbox.addEventListener( 'dragover', dragover, false );
        dropbox.addEventListener( 'drop', drop, false );
      }
    </script>
  </head>
  <body onload=init()>
    <div id="dropbox" class="dropbox"><p>Drop Files to Upload!</p></div>
  </body>
</html>
